import { makeStyles } from '@mui/styles';
import { Theme } from '@mui/material/styles';

interface DrawerStylesProps {
  width: string | number;
  expand: boolean;
}

const drawerCss = (entering: boolean) => ({
  overflow: 'hidden' as const,
  width: (props: DrawerStylesProps) => props.width,
  flexShrink: 0,
  borderRight: 'none',
  position: 'relative' as const,
  flex: 1,
  display: 'flex' as const,
  alignItems: 'stretch' as const,
  transition: (theme: any) => theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: entering
      ? theme.transitions.duration.enteringScreen
      : theme.transitions.duration.leavingScreen,
  }),
});

const useStyles = makeStyles((theme: Theme) => ({
  openDrawer: {
    ...drawerCss(true),
  },

  closeDrawer: {
    ...drawerCss(false),
  },

  buttonContainerOpen: {
    textAlign: 'end',
    padding: '0',
  },
  buttonContainerClosed: {
    textAlign: 'center',
    padding: '0',
  },
  button: {
    color: 'white',
    fontSize: '1em',
  },
  text: {
    marginLeft: theme.spacing(1),
  },
  container: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column',
    flex: 1,
    width: '100%',

    '& > .MuiBox-root': {
      overflow: 'auto',
      maxHeight: 'calc(100vh - 96px)',
    },
  },

  selected: {
    color: theme.palette.primary.main,
  },
  unselected: {
    color: theme.palette.common.white,
  },
  disabled: {
    color: theme.palette.common.black,
  },
  icon: {
    color: 'inherit',
    minWidth: 'unset',
  },
}));

export default useStyles;

